
<template>
<div class="login_container">
  <div class="login_box">

  <div>
    欢迎使用后台管理系统
  </div>
  <el-form
      ref="ruleFormRef"
      style="width: 100% "
      :model="data.ruleForm"

  >
    <el-form-item style="padding-left: 10px; padding-right:10px " prop="user_name">
      <el-input placeholder="请输入账号" v-model="data.ruleForm.username" prefix-icon="user" />
    </el-form-item>
    <el-form-item>
      <el-input placeholder="请输入密码"  v-model="data.ruleForm.password" prefix-icon="lock"/>
    </el-form-item>

    <div style="display: flex;justify-content: center;padding-bottom: 20px;margin-left: 10px;margin-right: 10px">
<el-button type="primary" style="width: 100%" @click="doLogin">登录</el-button>
    </div>
  </el-form>
</div>
</div>


  <RouterLink to="/hone">跳转首页</RouterLink>



  $ npm install axios$ npm install axios$ npm install axios
</template>

<script setup>
import {reactive, ref} from 'vue';


import {useRouter} from 'vue-router'

const router = useRouter()
//表单的引用对象，后续通过他判断表单提交的数据是否没问题
const ruleFormRef = ref();
const data =reactive({
  ruleForm: {
    username: "",

    password: "",}
})
const doLogin = () => {
  alert("执行到后台")

  router.push("/manager")
}


</script>



<style scoped>

.login_box {
width: 600px;
  position: absolute;
  right: 400px;
  top:400px;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;

}
.login_container {
  background-image: url("https://www.cqytxy.edu.cn/images/banner002.jpg");
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  background-size: cover;
}


</style>